import React, { FC, useState } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom"
import styles from './MangeLayout.module.scss'
import { PlusOutlined, DeleteFilled, FileFilled, StarFilled } from '@ant-design/icons';
import { Affix, message } from 'antd'
import { createQuestionService } from '../services/question'

const MangeLayout: FC = () => {
    const nav = useNavigate()
    const { pathname } = useLocation()
    const [loading, setLoading] = useState(false)

    async function handleCreateClick() {
        setLoading(true)
        const data = await createQuestionService() 
        const { id } = data || {}
        if (id) {
            nav(`/question/edit/${id}`)
            message.success('创建成功！')
        }
        setLoading(false)
    }

    return <>
        <div className={styles['container-body']}>
            <div className={styles.container}>
                <Affix offsetTop={120} className={styles.affix}>
                    <div className={styles.left}>
                        <button disabled={loading} onClick={handleCreateClick}><PlusOutlined /> 创建问卷</button><br />
                        <button onClick={() => nav('/manage/list')} className={pathname == '/manage/list' ? styles.active : ''}> <FileFilled /> 我的问卷</button><br />
                        <button onClick={() => nav('/manage/star')} className={pathname == '/manage/star' ? styles.active : ''}><StarFilled /> 星标问卷</button><br />
                        <button onClick={() => nav('/manage/trash')} className={pathname == '/manage/trash' ? styles.active : ''}><DeleteFilled /> 回收站</button>
                    </div>
                </Affix>

                <div className={styles.right}>
                    <Outlet />
                </div>
            </div>
        </div>
    </>
}

export default MangeLayout